@use '../utils/box-shadow_variables';
@use '../utils/font_variables';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.radio-card-selector {
  display: flex;
  margin-bottom: size_variables.$spacing-8;
}
.radio-card {
  box-shadow: box-shadow_variables.$box-shadow-low;
  flex: 1 1 25%;
  flex-direction: column;
  justify-content: space-between;
  margin: size_variables.$spacing-8 size_variables.$spacing-16;
  border: box-shadow_variables.$base-border;
  border-radius: size_variables.$radius;
  transition: all ease-in-out size_variables.$speed;
  max-width: 60%;
  input[type='radio'] {
    position: absolute;
    z-index: 1;
    opacity: 0;
  }

  input[type='radio'] + span.dot {
    border: 1px solid var(--token-color-palette-neutral-300);
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    flex-grow: 0;
  }

  input[type='radio']:checked + span.dot {
    background: var(--token-color-palette-blue-200);
    border: 1px solid var(--token-color-palette-blue-200);
    box-shadow: inset 0 0 0 0.15rem hsl(0, 0%, 100%);
  }
  input[type='radio']:focus + span.dot {
    box-shadow:
      0 0 10px 1px rgba(#1060ff, 0.4),
      inset 0 0 0 0.15rem hsl(0, 0%, 100%);
  }

  &.is-disabled {
    opacity: 0.6;
    box-shadow: none;
  }

  &.has-fixed-width {
    width: 368px;
    max-width: 368px;
  }
}
.radio-card:first-child {
  margin-left: 0;
}
.radio-card:last-child {
  margin-right: 0;
}
.radio-card-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.radio-card-row {
  display: flex;
  flex: 1;
  padding: size_variables.$spacing-16;
}
.radio-card-icon {
  color: var(--token-color-palette-neutral-300);
}
.radio-card-message {
  margin: size_variables.$spacing-4;
}

.radio-card-message-title {
  font-weight: font_variables.$font-weight-semibold;
  font-size: size_variables.$size-7;
  margin-bottom: size_variables.$spacing-4;
}
.radio-card-message-body {
  line-height: 1.2;
  color: var(--token-color-foreground-faint);
  font-size: size_variables.$size-8;
}

.radio-card-radio-row {
  display: flex;
  justify-content: center;
  background: var(--token-color-palette-neutral-50);
  padding: size_variables.$spacing-8;
}

.is-selected {
  &.radio-card {
    border-color: var(--token-color-palette-blue-200);
    background: var(--token-color-palette-neutral-50);
    box-shadow: box-shadow_variables.$box-shadow-middle;
  }
  .radio-card-icon {
    color: hsl(0, 0%, 4%);
  }
  .radio-card-radio-row {
    background: var(--token-color-palette-blue-50);
  }
}
